<template>
  <div class="home-page">
    <div class="header">数据更新截止时间：{{ currentTime }}</div>
    <div class="flow-wrap">
      <div class="step">
        <div class="step-title">营收</div>

        <div class="step-item" style="left:40px;top:60px;">需求</div>
        <div class="step-item" style="left:270px;top:60px;">订单编制</div>
        <div class="step-item" style="left:510px;top:20px;">费项</div>
        <div class="step-item" style="left:510px;top:100px;">产品</div>
        <div class="step-item" style="left:870px;top:60px;">订单起租</div>

        <div class="step-link" style="left:118px;top:55px;" @click="$router.push({name:'biz-lal'})">
          <img class="imgico" :src="imageType.normal" />
          站址周边场租水平提示
        </div>
        <div class="step-link" style="left:685px;top:55px;" @click="$router.push({name:'biz-prc'})">
          <img class="imgico" :src="sceneImage['scene1.5']" />
          产品与资源一致性检查
        </div>

        <div class="step-line" style="left:115px;top:74px;width:150px;"></div>
        <div class="step-line" style="left:345px;top:74px;width:75px;"></div>

        <div class="step-line" style="left:420px;top:35px;width:80px;"></div>
        <div class="step-line" style="left:420px;top:115px;width:80px;"></div>
        <div class="step-line verline" style="left:420px;top:36px;height:80px"></div>

        <div class="step-line" style="left:585px;top:35px;width:65px;"></div>
        <div class="step-line" style="left:585px;top:115px;width:65px;"></div>
        <div class="step-line verline" style="left:650px;top:36px;height:80px"></div>


        <div class="step-line verline" style="left:545px;top:135px;height:70px;"></div>
        <div class="step-line-arrow to_top" style="left:541px;top:130px;"></div>

        <div class="step-line" style="left:650px;top:74px;width:215px;"></div>
        <div class="step-line verline" style="left:905px;top:95px;height:410px;"></div>
        <div class="step-line-arrow to_top" style="left:901px;top:92px;"></div>
        <div class="step-line" style="left:945px;top:74px;width:35px;"></div>
        <div class="step-line verline" style="left:980px;top:74px;height:600px;"></div>
        <div class="step-line-arrow to_right" style="left:260px;top:71px;"></div>

        <div class="step-line-arrow to_right" style="left:500px;top:32px;"></div>
        <div class="step-line-arrow to_right" style="left:500px;top:112px;"></div>
        <div class="step-line-arrow to_right" style="left:860px;top:71px;"></div>

      </div>
      <div class="step">
        <div class="step-title">工程</div>

        <div class="step-item" style="left:270px;top:60px;">立项设计</div>
        <div class="step-item" style="left:390px;top:60px;">实施</div>
        <div class="step-item" style="left:510px;top:60px;">验收</div>
        <div class="step-item" style="left:630px;top:60px;">完工交维</div>
        <div class="step-item" style="left:750px;top:60px;">运维</div>

        <div class="step-link" style="left:405px;top:35px;" @click="$router.push({name:'biz-emc'})">
          <img class="imgico" :src="imageType.normal" />
          工程物资一致性检查
        </div>
        <div class="step-link" style="left:550px;top:125px;" @click="$router.push({name:'biz-psr'})">
          <img class="imgico" :src="imageType.normal" />
          项目状态实时获取
        </div>

        <div class="step-line" style="left:345px;top:74px;width:36px;"></div>
        <div class="step-line" style="left:465px;top:74px;width:36px;"></div>
        <div class="step-line" style="left:585px;top:74px;width:36px;"></div>

        <div class="step-line verline" style="left:305px;top:-55px;height:105px;"></div>
        <div class="step-line verline" style="left:425px;top:95px;height:140px;"></div>

        <div class="step-line-arrow to_bottom" style="left:301px;top:48px;"></div>
        <div class="step-line-arrow to_top" style="left:421px;top:92px;"></div>

        <div class="step-line-arrow to_right" style="left:380px;top:71px;"></div>
        <div class="step-line-arrow to_right" style="left:500px;top:71px;"></div>
        <div class="step-line-arrow to_right" style="left:620px;top:71px;"></div>
      </div>
      <div class="step">
        <div class="step-title">资产</div>

        <div class="step-item" style="left:390px;top:90px;">采购</div>
        <div class="step-item" style="left:510px;top:40px;">转资</div>
        <div class="step-item" style="left:510px;top:90px;">结算</div>
        <div class="step-item" style="left:630px;top:40px;">资源维护</div>

        <div class="step-link" style="left:205px;top:15px;" @click="$router.push({name:'biz-mrp'})">
          <img class="imgico" :src="imageType.normal" />
          物资参考提示
        </div>
        <div class="step-link" style="left:460px;top:125px;" @click="$router.push({name:'biz-mc'})">
          <img class="imgico" :src="imageType.normal" />
          采购、入库、付款单据匹配检查
        </div>
        <div class="step-link" style="left:710px;top:20px;" @click="$router.push({name:'biz-ob'})">
          <img class="imgico" :src="sceneImage['scene2.3']" />
          固化数据绑定订单查询
        </div>
        <div class="step-link" style="left:710px;top:45px;" @click="$router.push({name:'biz-os'})">
          <img class="imgico" :src="sceneImage['scene2.2']" />
          订单打标业务状态查询
        </div>
        <div class="step-link" style="left:710px;top:70px;" @click="$router.push({name:'biz-resource'})">
          <img class="imgico" :src="sceneImage['scene2.6']" />
          资源打标业务状态查询
        </div>


        <div class="step-line verline" style="left:305px;top:-55px;height:160px;"></div>
        <div class="step-line verline" style="left:545px;top:-55px;height:85px;"></div>

        <div class="step-line" style="left:305px;top:104px;width:75px;"></div>
        <div class="step-line" style="left:465px;top:104px;width:36px;"></div>
        <div class="step-line" style="left:585px;top:54px;width:36px;"></div>

        <div class="step-line-arrow to_bottom" style="left:541px;top:30px;"></div>
        <div class="step-line-arrow to_right" style="left:380px;top:101px;"></div>
        <div class="step-line-arrow to_right" style="left:500px;top:101px;"></div>
        <div class="step-line-arrow to_right" style="left:620px;top:51px;"></div>

      </div>
      <div class="step">
        <div class="step-title">成本</div>

        <div class="step-item" style="left:270px;top:60px;">合同</div>
        <div class="step-item" style="left:390px;top:60px;">场地费</div>
        <div class="step-item" style="left:510px;top:60px;">维护费</div>
        <div class="step-item" style="left:630px;top:60px;">发电费</div>
        <div class="step-item" style="left:750px;top:60px;">维系费</div>
        <div class="step-item" style="left:870px;top:60px;">电费</div>

        <div class="step-link" style="left:350px;top:100px;" @click="$router.push({name:'biz-lal'})">
          <img class="imgico" :src="imageType.normal" />
          站址周边场租水平提示
        </div>
        <div class="step-link" style="left:820px;top:100px;" @click="$router.push({name:'biz-or'})">
          <img class="imgico" :src="imageType.normal" />
          订单起租不及时风险校验
        </div>

      </div>
      <div class="step">
        <div class="step-title offset15">三集中</div>

        <div class="step-item lgbtn" style="left:270px;top:60px;" @click="$router.push({name:'biz-oa'})">集中操作关联查询展示</div>
        <div class="step-item" style="left:510px;top:60px;width:200px;">集中操作系统自动审核</div>
        <div class="step-item" style="left:750px;top:60px;width:200px;">集中出账</div>

        <div class="step-link" style="left:520px;top:10px;" @click="$router.push({name:'biz-ptzc'})">
          <img class="imgico" :src="sceneImage['scene2.9']" />
          客户提前退租的赔偿金额校验
        </div>
        <div class="step-link" style="left:520px;top:35px;" @click="$router.push({name:'biz-arc'})">
          <img class="imgico" :src="sceneImage['scene2.8']" />
          场地费(场地租金)自动稽核
        </div>

        <div class="step-line" style="left:955px;top:74px;width:25px;"></div>
        <div class="step-line-arrow to_left" style="left:950px;top:71px;"></div>

        <div class="flow-lendge" style="left:345px;bottom:8px;">
          <!-- <div class="lendge-item" style="color:#bab8b8;">图例：</div> -->
          <div class="lendge-item"><img class="imgico" :src="imageType.normal" />场景事中拦截比率&lt;=40% </div>
          <div class="lendge-item"><img class="imgico" :src="imageType.warning" />40%&lt;场景事中拦截比率&lt;=70%</div>
          <div class="lendge-item"><img class="imgico" :src="imageType.error" />场景事中拦截比率&gt;70%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .home-page {
    position: relative;
    width: 100%;
    border-right: 1px solid #f4f4f4;
    background: #fff;
  }

  .home-page>.header {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: #eaeaea;
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
  }

  .home-page>.flow-wrap {
    overflow: auto;
  }

  .flow-wrap>.step {
    position: relative;
    width: 100%;
    min-width: 1120px;
    height: 150px;
    border-bottom: 1px dashed #bababa;
  }

  .step .step-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
  }

  .step-title.offset15 {
    padding-top: 50px;
  }

  .step-item {
    position: absolute;
    height: 28px;
    min-width: 70px;
    line-height: 28px;
    font-size: 12px;
    background: #0053a7;
    border: 1px solid #044689;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 0 10px;
    cursor: default;
  }

  .step-item:hover {
    background: #044689;
  }

  .step .flow-lendge {
    position: absolute;
    width: 600px;
  }

  .step .step-link {
    position: absolute;
    font-size: 12px;
    cursor: pointer;
  }

  .step .step-link:hover {
    color: #4390ea;
  }


  .step-link .imgico {
    width: 16px;
    height: 16px;
    margin-right: 0px;
    margin-top: -6px;
  }

  .flow-lendge>.lendge-item {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .lendge-item .imgico {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
  }

  .step-item.lgbtn {
    width: 200px;
    cursor: pointer;
  }

  .step-item.lgbtn:hover {
    background: #fff;
    color: #0053a7;
    font-weight: 550;
  }

  .step-line {
    position: absolute;
    height: 1px;
    border-bottom: 1px solid #666;
  }

  .step-line.verline {
    width: 1px;
    border-bottom: none;
    border-left: 1px solid #666;
  }

  .step-line-arrow {
    position: absolute
  }

  .step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
</style>

<script>

  export default {
    data() {
      return {
        currentTime: '2020-09-01 00:00:00',
        icoType: 'normal',
        imageType:{
          normal:require("@/assets/img/normal.png"),
          error:require("@/assets/img/error.png"),
          warning:require("@/assets/img/warning.png")
        },
        sceneImage:{
           'scene1.5':require("@/assets/img/normal.png"),
           'scene2.2':require("@/assets/img/normal.png"),
           'scene2.3':require("@/assets/img/normal.png"),
           'scene2.6':require("@/assets/img/normal.png"),
           'scene2.8':require("@/assets/img/normal.png"),
           'scene2.9':require("@/assets/img/normal.png"),
        }
      }
    },
    created() {
      this.setCurrentTime()
      this.queryPageCount('*')
    },
    computed: {},
    methods: {
      dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
      setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
      setSceneImage(scene,per){
          var key = 'scene'+scene;
          if(per > 0.4 && per <= 0.7){
             this.sceneImage[key]=this.imageType.warning;
          }else if(per > 0.7){
             this.sceneImage[key]=this.imageType.error;
          }else{
            this.sceneImage[key]=this.imageType.normal;
          }
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          //console.log(r.data.data);
          var self = this;
          if(r.data.data && r.data.data.length >0){
              var scenes = r.data.data;
              scenes.forEach((item,i)=>{
                  self.setSceneImage(item.scene,item.per);
              });
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>
